<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/*伪类选择器：语法：选择器：hover 悬停功能改变效果【所有元素都可以用】
			 
			 */
			h1:hover{
				color: #e4393c;
			}
			/* 练习 页面生成200x200四方块，红色 悬停后黄色 */
			div{
				width:200px;
				height:200px;
				background: red;
			}
	        div:hover{
				background: #f8fc02;
			} 
			/* 超链接四种状态 */
			/* 1.超链接未点击时 伪类选择器：link* */
			a:link{
				color: red;
				/* 下划线 */
				text-decoration: none;
			}
			/* 2.点击后超链接 伪类选择器：visited */
			a:visited{
				color: pink;
			}
			/* 3.悬停超链接状态 伪类选择器：hover */
			a:hover{
				color: yellow;
			}
			/* 4.点击跳转时状态 伪类选择器：active */
			a:active{
				font-size: 50px;
			}
			/*：focus 伪类选择器针对input元素，鼠标点击输入框时候状态 */
            input:focus{
				background:#e4393c;
			}
			li:first-child{
				color: #e4393c;
			}
			li:last-child{
				color: #85ff63;
			}
			li:nth-child(2){
				font-size: 20px;
				color: aqua;
			}
		</style>
	</head>
	<body>
		<!--列表 表格：伪类选择器：first-child，last-child -->
		<ul>
			<li>还珠格格</li>
			<li>情深深一幕幕</li>
			<li>在水一方</li>
			<li>山不在高</li>
			<li>水不在低</li>
		</ul>
		
		
		<!--表单：伪类选择器    ：focus-->
		<input type="test">
		
		
		<hr>
		<h1>悬停效果</h1>
		<div></div>
		<hr>
	     <h1>针对超链接了解四种状态</h1>
		 <a href="#">超链接1</a>
		 <a href="#">超链接2</a>
	</body>
</html>